<template>
    <view>
        <view class="top-container">
            <view class="step-container">
                <view class="icon-1"><text class="desc">个人基本信息</text></view>
                <view class="line"></view>
                <view class="icon-2"><text class="desc">疾病史与医保</text></view>
                <view class="line"></view>
                <view class="icon-3"><text class="desc">创建就诊卡</text></view>
            </view>
        </view>
        <view class="info-1-container" v-if="showInfoPanel == 1">
            <text class="title">填写个人基本信息</text>
            <text class="desc">填写如下信息，以帮助医生了解您的身体基本情况，方便问诊开药</text>
            <u-form
                labelPosition="top"
                :model="dataForm"
                :rules="rules"
                ref="form1"
                labelWidth="110"
                :labelStyle="labelStyle"
            >
                <u-form-item
                    label="本人姓名"
                    prop="name"
                    borderBottom
                    ref="name"
                    leftIcon="account"
                    :leftIconStyle="iconStyle"
                    required
                >
                    <u-input v-model="dataForm.name" border="none" placeholder="输入姓名" />
                </u-form-item>
                <u-form-item
                    label="性别"
                    prop="sex"
                    borderBottom
                    ref="sex"
                    @click="showSex = true"
                    leftIcon="man"
                    :leftIconStyle="iconStyle"
                    required
                >
                    <u-input
                        v-model="dataForm.sex"
                        disabled
                        disabledColor="#ffffff"
                        placeholder="请选择性别"
                        border="none"
                    ></u-input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item
                    label="身份证号"
                    prop="pid"
                    borderBottom
                    ref="sex"
                    leftIcon="file-text"
                    :leftIconStyle="iconStyle"
                    required
                >
                    <u-input v-model="dataForm.pid" border="none" placeholder="输入身份证号码" />
                    <view class="ocr">
                        <ocr-navigator @onSuccess="scanIdcardFront" certificateType="idCard" :opposite="false">
                            <u-icon slot="right" size="26" :name="img['icon-1']"></u-icon>
                        </ocr-navigator>
                    </view>
                </u-form-item>
                <u-form-item
                    label="手机号码"
                    prop="tel"
                    borderBottom
                    ref="tel"
                    leftIcon="phone"
                    :leftIconStyle="iconStyle"
                    required
                >
                    <u-input v-model="dataForm.tel" border="none" placeholder="输入手机号码" />
                </u-form-item>
                <u-form-item
                    label="出生日期"
                    prop="birthday"
                    borderBottom
                    ref="birthday"
                    @click="showDatetime = true"
                    leftIcon="calendar"
                    :leftIconStyle="iconStyle"
                    required
                >
                    <u-input
                        v-model="dataForm.birthday"
                        disabled
                        disabledColor="#ffffff"
                        placeholder="请选择您的生日"
                        border="none"
                    ></u-input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
            </u-form>
            <view class="operate">
                <u-button type="primary" text="下一步" size="large" color="#2074fd" @click="nextHandle"></u-button>
            </view>
        </view>
        <view class="info-2-container" v-if="showInfoPanel == 2">
            <text class="title">填写疾病史与医保信息</text>
            <text class="desc">填写如下信息，以帮助医生了解您的身体基本情况，方便问诊开药</text>

            <view class="label">
                <u-icon name="info-circle-fill" size="20" color="#0764FD"></u-icon>
                <text>您是否患有或者患过以下疾病</text>
            </view>
            <view class="illness-tabs">
                <view
                    class="tab"
                    v-for="one in illnessList"
                    :class="dataForm.medicalHistory.includes(one) ? 'tab active' : 'tab'"
                    @tap="illnessHandle(one)"
                >
                    {{ one }}
                </view>
            </view>
            <view class="label">
                <u-icon name="info-circle-fill" size="20" color="#0764FD"></u-icon>
                <text>请选择您自己的医保类型</text>
            </view>
            <view class="insurance-tabs">
                <view
                    v-for="one in insuranceTypeList"
                    :class="dataForm.insuranceType == one ? 'tab active' : 'tab'"
                    @tap="insuranceTypeHandle(one)"
                >
                    {{ one }}
                </view>
            </view>
            <view class="operate">
                <u-button type="primary" text="提交信息" size="large" color="#2074fd" @click="submitHandle"></u-button>
            </view>
        </view>
        <u-action-sheet
            :show="showSex"
            :actions="sexList"
            title="请选择性别"
            @close="
                showSex = false;
                this.$refs.form1.validateField('sex');
            "
            @select="selectSex"
        ></u-action-sheet>
        <u-datetime-picker
            :show="showDatetime"
            mode="date"
            minDate="-2209017600000"
            @confirm="confirmBirthday"
            @cancel="
                showDatetime = false;
                this.$refs.form1.validateField('birthday');
            "
        ></u-datetime-picker>
        <image :src="bannerUrl" mode="widthFix" class="banner"></image>
    </view>
</template>

<script>
const dayjs = require('dayjs');

export default {
    data() {
        return {
            img: {
                'icon-1': `${this.patientUrl}/page/user/fill_user_info/icon-1.png`
            },
            flag: 'insert',
            showInfoPanel: 1,
            labelStyle: {
                color: '#2074fd',
                'font-weight': 'bold'
            },
            iconStyle: {
                color: '#0764FD',
                'font-size': '34rpx',
                'margin-top': '3rpx'
            },
            showSex: false,
            showDatetime: false,
            sexList: [
                {
                    name: '男'
                },
                {
                    name: '女'
                }
            ],
            illnessList: [
                '高血压',
                '糖尿病',
                '心脏病',
                '脑梗',
                '脑出血',
                '脑中风',
                '白血病',
                '癫痫',
                '肾病',
                '其他',
                '无'
            ],
            insuranceTypeList: [
                '社会基本医疗保险',
                '商业医疗保险',
                '新型农村合作医疗',
                '大病统筹',
                '公费医疗',
                '城镇居民医疗保险',
                '其他',
                '无'
            ],
            validate: true,
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: ['change', 'blur']
                    },
                    {
                        type: 'string',
                        pattern: '^[a-zA-Z0-9\\u4e00-\\u9fa5]{2,15}$',
                        required: true,
                        message: '姓名不正确',
                        trigger: ['blur', 'change']
                    }
                ],
                sex: {
                    type: 'string',
                    max: 1,
                    required: true,
                    message: '请选择男或女',
                    trigger: ['blur', 'change']
                },
                pid: [
                    {
                        required: true,
                        message: '请输入身份证号码',
                        trigger: ['change', 'blur']
                    },
                    // {
                    //     type: 'string',
                    //     pattern:
                    //         '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
                    //     required: true,
                    //     message: '身份证号码不正确',
                    //     trigger: ['blur', 'change']
                    // }
                ],
                tel: [
                    {
                        required: true,
                        message: '请输入手机号码',
                        trigger: ['change', 'blur']
                    },
                    {
                        type: 'string',
                        pattern: '^1[0-9]{10}$',
                        required: true,
                        message: '手机号码不正确',
                        trigger: ['blur', 'change']
                    }
                ],
                birthday: {
                    type: 'string',
                    required: true,
                    message: '请选择出生日期',
                    trigger: ['blur', 'change']
                }
            },
            dataForm: {
                id: null,
                name: null,
                sex: null,
                pid: null,
                tel: null,
                birthday: null,
                medicalHistory: ['无'],
                insuranceType: '无'
            },
            bannerUrl: `${this.patientUrl}/banner/banner-4.jpg`
        };
    },
    methods: {
        selectSex:function(e){
        this.dataForm.sex = e.name;
      },
      confirmBirthday:function(e){
        this.showDatetime = false;
        let date = new Date();
        date.setTime(e.value);
        this.dataForm.birthday = dayjs(date).format('YYYY-MM-DD');
        this.$refs.form1.validateField('birthday');

      },
      //下一页
      nextHandle:function(){
        let that = this;
        that.validate = true;
        that.$refs.form1.validateField('name',function(errors){
          that.validateFieldHandle(that, errors);
        });
        that.$refs.form1.validateField('pid',function(errors){
          that.validateFieldHandle(that, errors);
        });
        that.$refs.form1.validateField('tel',function(errors){
          that.validateFieldHandle(that, errors);
        });
        that.$refs.form1.validateField('sex',function(errors){
          that.validateFieldHandle(that, errors);
        });
        that.$refs.form1.validateField('birthday',function(errors){
          that.validateFieldHandle(that, errors);
        });
        //以上验证是异步的，所以需要定时器预估时间
        setTimeout(function(){
          if(!that.validate){
            uni.showToast({
              icon:'error',
              title:'数据不正确'
            });
            return;
          }
          //验证通过 到第二页
          that.showInfoPanel = 2 ;
        },500);
      },
      //校验
      validateFieldHandle:function(ref,errors){
        if(errors.length > 0){
          ref.validate = false;
        }
      },
      illnessHandle:function(name){
        let that = this;
        let medicalHistory = that.dataForm.medicalHistory;
        //如果数组中包含了点击的 疾病，就要取消选中
        if(medicalHistory.includes(name)){
          //从数组中剔除
          medicalHistory = medicalHistory.filter(function(one){
            if(one!=name){
              return one;
            }
          });
          //如果数组中没有疾病，就添加‘无’这个元素
          if(medicalHistory.length==0){
            medicalHistory.push('无');
          }
        }
        //如果数组中没有这个疾病，就选中该疾病
        else{
          //如果不是无,就添加，并移除无
          if(name !='无'){
            //从数组中剔除
            medicalHistory = medicalHistory.filter(function(one){
              if(one!='无'){
                return one;
              }
            });
            medicalHistory.push(name);
          }else{
            //如果是无,清除其他元素
            medicalHistory.length=0;
            medicalHistory.push('无');
          }
        }
        that.dataForm.medicalHistory = medicalHistory;
      },
      //医保类型
      insuranceTypeHandle:function(name){
        this.dataForm.insuranceType = name;
      },
	  //提交
	  submitHandle:function(){
		  let that = this;
		  uni.showModal({
		  	title:'提示信息',
			content:that.flag =='insert'?'确定创建就诊卡？':'确定更新就诊卡信息？',
			success:function(resp){
				if(resp.confirm){
					let data = that.dataForm;
					let url = that.flag=='insert'?that.api.insertUserInfoCard:that.api.updateUserInfoCard;
					that.ajax(url,'POST',data,function(resp){
						uni.showToast({
							icon: 'success',
							title: that.flag =='insert'?'创建就诊卡成功？':'更新就诊卡信息成功',
						});
						setTimeout(function(){
							uni.switchTab({
								url:'/pages/mine/mine'
							});
						},1500);
					})
				}
			}
		  })
	  },
	  scanIdcardFront:function(resp){
		  let that = this;
		  // console.log(resp);
		  let detail = resp.detail;
		  that.dataForm.name = detail.name.text;
		  that.dataForm.pid = detail.id.text;
		  that.dataForm.sex= detail.gender.text;
		  that.dataForm.birthday = detail.birth.text;
		  this.$refs.form1.validateField('name');
		  this.$refs.form1.validateField('pid');
		  this.$refs.form1.validateField('sex');
		  this.$refs.form1.validateField('birthday');
	  }
    },
    onLoad: function() {
        let that = this;
		that.ajax(
			that.api.selectUserInfoCard,
			'GET',
			{},
			function(resp){
				let data = resp.data;
				if(data.msg == '没有查询到数据'){
					that.flag ='insert';
					return;
				}
				that.flag = 'update';
				that.dataForm.id = data.id;
				that.dataForm.name = data.name;
				that.dataForm.sex= data.sex;
				that.dataForm.pid = data.pid;
				that.dataForm.tel = data.tel;
				that.dataForm.birthday = data.birthday;
				that.dataForm.medicalHistory = data.medicalHistory;
				that.dataForm.insuranceType = data.insuranceType;
				
			},
			false);
    }
};
</script>

<style lang="less">
@import url(fill_user_info.less);
</style>
